<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
	canvas{ position:absolute}
	canvas #canvas1{ z-index:1}
	canvas #canvas2{ z-index:2; left:0px; top:0px; 
	/*border:thin dashed black; */
	display:none}
</style>

<script type="text/javascript">
function window_onload()
	{
		//1.1 首先获得原图的canvas元素 
		 var canvas1 = document.getElementById('canvas1'); 
    	//1.2 获取显示原图的canvas元素的图形上下文对象
		context = canvas1.getContext('2d'); 
   		//1.3 获取图像源
  		 var image = new Image();
		image.src = "image/1.jpg";
		//1.4 绘制图像
		
			context.drawImage(image,0,0);
			
			//2.鼠标移动到图片上方显示一个效果
			canvas1.onmousemove = canvas1_onmouse_move;
		}
	function canvas1_onmouse_move(ev)
{
    var canvas1,canvas2;//原图像使用的canvas元素与放大镜中图像使用的canvas元素
    var x,y;//鼠标在canvas元素中的相对坐标点
    var drawWidth,drawHeight;//鼠标所指区域的宽度与高度
    canvas1=document.getElementById("canvas1");//获取原图像使用的canvas元素
    canvas2=document.getElementById("canvas2");//获取放大镜中图像使用的canvas元素
    var context = canvas2.getContext('2d'); //获取放大镜中图像使用的canvas元素的图形上下文对象
    canvas2.style.display="inline"; //显示放大镜
    context.clearRect(0,0,canvas2.width,canvas2.height);//擦除放大镜中原图像
    x=ev.pageX-canvas1.offsetLeft+2;
	//鼠标在canvas元素中X轴上的相对坐标点+2
    y=ev.pageY-canvas1.offsetTop+2;
	//+2是为了避免鼠标移动到放大镜上
    canvas2.style.left=(ev.pageX+2)+"px";//设置放大镜在原图上的X轴上的坐标点
    canvas2.style.top=(ev.pageY+2)+"px";//设置放大镜在原图上的Y轴上的坐标点
    //获取放大镜图像的图像源
    var image = new Image(); 
    image.src = "image/1.jpg"; 
    //获取鼠标所指区域的宽度  
    if(x+40>canvas1.width)//如果鼠标所指区域的宽度超出原图宽度
        drawWidth=canvas1.width-x;//设置鼠标所指区域宽度为原图中剩余宽度
    else
        drawWidth=200;//设置鼠标所指区域的宽度为40像素
    //获取鼠标所指区域的高度  
    if(y+200>canvas1.height)//如果鼠标所指区域的高度超出原图高度
        drawHeight=canvas1.height-y;//设置鼠标所指区域高度为原图中剩余高度
    else
        drawHeight=200;//设置鼠标所指区域的高度为40像素
    //放大2倍绘制放大镜图像
    context.drawImage(image,x,y,drawWidth,drawHeight,0,0,drawWidth*2,drawHeight*2);
}
<!---------------鼠标移动------------------------->
</script>
</head>
<body onLoad="window_onload()">
<!--<h1> 对图像使用放大镜</h1>-->
<canvas id="canvas1" width="360px" height="360px"></canvas>
<canvas id="canvas2" width="200px" height="200px"></canvas>
</body>
</html>
